<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                            <Row>
                                <Form-item label="场景标识" prop="paramLogo">
                                    <Input type="text" v-model="searchForm.paramLogo" clearable placeholder="场景标识"
                                           style="width: 200px"/>
                                </Form-item>
                                <Form-item label="状态" prop="paramStatus">
                                    <Select v-model="searchForm.paramStatus" placeholder="请选择" clearable style="width: 200px">
                                        <Option value="yes">启用</Option>
                                        <Option value="no">禁用</Option>
                                    </Select>
                                </Form-item>
                               <Row>
                                   <Form-item style="margin-left: 38%" class="br">
                                       <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                       <Button @click="handleReset">重置</Button>
                                   </Form-item>
                               </Row>
                            </Row>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Form>
                            <Row>
                                <Button @click="add" type="primary" icon="md-add">新增参数</Button>
                            </Row>
                        </Form>
                    </Row>
                    <br/>
                    <Row>
                        <Alert show-icon>
                            参数配置列表
                        </Alert>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom"
                               ref="table">
                            <template slot-scope="{ row, index }" slot="paramStatus">
                                <div v-if="row.paramStatus === 'yes'">
                                    <Tag color="success" size="default">启用</Tag>
                                </div>
                                <div v-else>
                                    <Tag color="error" size="default">禁用</Tag>
                                </div>
                            </template>
                            <template slot-scope="{ row, index }" slot="action">
                                <Button style="margin-right:5px" type="primary" size="small" @click="edit(row)">编辑
                                </Button>
                                <Button v-if="row.paramStatus==='yes'" style="margin-right:5px" type="warning" size="small"
                                        @click="disable(row)">禁用
                                </Button>
                                <Button v-if="row.paramStatus==='no'" style="margin-right:5px" type="success" size="small"
                                        @click="enable(row)">启用
                                </Button>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="paramModalVisible" :mask-closable='false' :width="500"
               :styles="{top: '90px'}">
            <Form ref="paramForm" :model="paramForm" :label-width="70" :rules="paramFormRules">
                <FormItem label="场景描述" prop="paramDescribe">
                    <Input v-model="paramForm.paramDescribe"/>
                </FormItem>
                <FormItem label="场景标识" prop="paramLogo">
                    <Input v-model="paramForm.paramLogo"/>
                </FormItem>
                <FormItem label="附加贷比例上限" prop="additionalRate">
                    <Input v-model="paramForm.additionalRate"/>
                </FormItem>
                <FormItem label="最大融资比例" prop="maxLoanRate">
                    <Input v-model="paramForm.maxLoanRate"/>
                </FormItem>
                <FormItem label="状态" prop="paramStatus">
                    <Select v-model="paramForm.paramStatus">
                        <Option value="yes">正常</Option>
                        <Option value="no">锁定</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelParam">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="submitParam">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {
        page,save,submit
    } from "@/projects/afs-core-business/api/afs-case/max-loan-param/maxLoanParam.js";
    import {deepClone} from "../../../../../../libs/utils/ObjectClone";
    export default {
        name: "max-loan-param",
        data(){
            return {
                loading: true,
                selectCount: 0,
                selectList: [],
                searchKey: "",
                searchForm: {
                    paramLogo: "",
                    paramStatus: "",
                    pageNumber: 1,
                    pageSize: 10,
                },
                selectDate: null,
                modalType: 0,
                paramModalVisible: false,
                modalTitle: "",
                paramForm: {
                    id: null,
                    paramDescribe: "",
                    paramLogo: "",
                    additionalRate: "",
                    maxLoanRate: "",
                    paramStatus: "",
                },
                submitLoading: false,

                columns: [
                   /* {
                        title: "ID",
                        key: "id",
                        minWidth: 120,
                        fixed: "center"
                    },*/
                    {
                        title: "场景描述",
                        key: "paramDescribe",
                        minWidth: 250,
                        fixed: "center"
                    },
                    {
                        title: "场景标识",
                        key: "paramLogo",
                        minWidth: 270,
                        fixed: "center"
                    },
                    {
                        title: "附加贷比例上限",
                        key: "additionalRate",
                        minWidth: 140,
                        fixed: "center"
                    },
                    {
                        title: "最大融资比例",
                        key: "maxLoanRate",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        title: "状态",
                        key: "paramStatus",
                        align: "center",
                        minWidth: 150,
                        slot: "paramStatus"
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 150,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ],
                paramFormRules:{paramLogo: [{required: true, message: "场景标识不能为空", trigger: "change"}],
                    paramDescribe: [{required: true, message: "场景描述不能为空", trigger: "change"}],
                    additionalRate: [{required: true, message: "附加贷比例上限不能为空", trigger: "change"}],
                    maxLoanRate: [{required: true, message: "最大融资比例不能为空", trigger: "change"}],
                    paramStatus: [{required: true, message: "状态不能为空", trigger: "change"}]
                },
                data: [],
                total: 0,

            }
        },
        methods:{
            init() {
                this.getParamList();
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getParamList();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getParamList();
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getParamList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                // 重新加载数据
                this.getParamList();
            },
            cancelParam() {
                this.paramModalVisible = false;
                this.$refs.paramForm.resetFields();
            },
            //新增
            add(){
                this.modalType = 0;
                this.modalTitle = "新增参数配置";
                this.$refs.paramForm.resetFields();
                this.paramModalVisible = true;
            },
            edit(v) {
                this.modalType = 1;
                this.modalTitle = "编辑参数配置";
                this.$refs.paramForm.resetFields();
                v.additionalRate=v.additionalRate.toString();
                v.maxLoanRate=v.maxLoanRate.toString();
                this.paramForm = deepClone(v);
                this.paramModalVisible = true;

            },
            submitParam() {
                // 编辑
                this.$refs.paramForm.validate(valid => {
                    if(valid){
                    this.submitLoading = true;//submit
                    if (this.paramForm.id != null && this.paramForm.id != "") {
                        save(this.paramForm).then(res => {
                            this.submitLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("操作成功");
                                this.getParamList();
                                this.paramModalVisible = false;
                            }
                        }).catch(() => {
                            this.submitLoading = false;
                            this.loading = false;
                            this.getParamList();
                        });
                    } else {
                        submit(this.paramForm).then(res => {
                            this.submitLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success(res.msg);
                                this.getParamList();
                                this.paramModalVisible = false;
                            } else {
                                this.$Message.fail(res.msg);
                            }
                        }).catch(() => {
                            this.submitLoading = false;
                            this.loading = false;
                            this.getParamList();
                        });
                    }
                    }
                });
            },
            getParamList() {
                this.loading = true;
                page(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            enable(v) {
                this.$Modal.confirm({
                    title: "确认启用",
                    content: "您确认要启用租户 " + " ?",
                    onOk: () => {
                        v.paramStatus='yes';
                        save(v).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("操作成功");
                                this.getParamList();
                            }
                        }).catch(()=>{
                            this.submitLoading = false;
                            this.getParamList();
                        });
                    }
                });
            },
            disable(v) {
                this.$Modal.confirm({
                    title: "确认禁用",
                    content: "您确认要禁用参数 "  + " ?",
                    onOk: () => {
                        v.paramStatus='no';
                        save(v).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("操作成功");
                                this.getParamList();
                            }
                        }).catch(()=>{
                            this.submitLoading = false;
                            this.getParamList();
                        });
                    }
                });
            }
        },

        mounted() {
            this.init();
        }
    }
</script>

<style scoped>

</style>
